<template>
	<view class="input-box">
		<view class="inputMain" v-if="type == 'input'">
			<view class="inputName">
				{{name}}
			</view>
			<view class="inpIconFlex" :class="{focus: isFocus}">
				<view class="mask"></view>
				<slot name="left"></slot>
				<input class="inp" :type="iptType" @input="change" @focus="inpFoc" @blur="inpBlu"
					:placeholder="placeholder?placeholder:$t('請輸入') + ' '+name" :value="values" :disabled="disabled">
				<view class="right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineComponent,
		ref,
		watch,
		computed
	} from 'vue';
	const $emit = defineEmits(['myInp'])
	const props = defineProps({
		type: {
			type: String,
			default: 'input'
		},
		name: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		},
		modelValue: {
			type: String,
			default: ''
		},
		values:{
			type: String,
			default: ''
		},
		disabled:{
			type: Boolean,
			default: false
		},
		iptType: {
			type: String,
			default: 'text'
		}
	})
	const change = (e) => {
		$emit('myInp', e.detail.value)
	}
	let isFocus = ref(false)
	const inpFoc = () => {
		isFocus.value = true
	}
	const inpBlu = () => {
		isFocus.value = false
	}
</script>

<style lang="scss" scoped>
	.input-box {
		margin-top: 50rpx;
		width: 100%;

		.inputName {
			font-size: 24rpx;
			color: #808492;
			line-height: 24rpx;
		}

		.inpIconFlex {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			position: relative;
			width: 640rpx;
			height: 88rpx;
			background-color: #636897;
			border-radius: 15rpx;
			justify-content: center;
			align-items: center;
			

			.right {
				position: absolute;
				right: 24rpx;
			}

			.inp {
				border: 0rpx;
				width: 100%;
				padding: 0 27rpx 0rpx 15rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				display: block;
				line-height: 28rpx;
			}

			.mask {
				position: absolute;
				top: 2rpx;
				left: 2rpx;
				background-color: #18171E;
				border-radius: 11rpx;
				width: 636rpx;
				height: 84rpx;
			}
		}

		.focus {
			background: linear-gradient(to right, #4c3397, #7B65FF, #FF78A8);
		}
	}
</style>